<template>
  <div ref="radarChart"  :id="idName"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, toRefs, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
const radarChart = ref(null);
const props = defineProps({
  idName: {
    type: String,
    default: "barChart",
  },
  title: {
		type: String,
		default: "XXX饼状图"
	},
	vm: {
    type: Object,
    default: function () {
      return {
        xAxis: "xAxis",
        names: "names",
        values: "values",
      };
    },
  },
});
let { idName, title, vm } = toRefs(props);
let option = ref({
    title: {
      left: "center",
      text: '访问数统计'
    },
    legend: {
      data: [],
      type: 'scroll',
      orient: 'horizontal',
      y: 'bottom'
      },
    radar: {
      // 雷达图的相关配置
      indicator: [
       
      ]
    },
    series: [{
      name: '访问数',
      type: 'radar',
      // 雷达图的数据
      data: [
        {
          value:[],
          name: '访问数'
        }
      ]
    }]
  });
const series = computed(() => {
	let values = vm.value.values;
	return values;
})
let init_chart = () => {
	let optionObj = option.value;

	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}
	optionObj.series[0].data[0].value = series.value;
	optionObj.series[0].data[0].name = vm.value.names[0];
	optionObj.series[0].name = vm.value.names[0];
	optionObj.legend.data =  vm.value.names;
  optionObj.radar.indicator =  vm.value.indicator;

	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
watch(series, (newValue, oldValue) => {
  if (newValue) {
    init_chart();
  }
});
onMounted(() => {
	setTimeout(()=>{
			init_chart();
	},200)

});
</script>
